<!-- 各子站综合信息 -->
<template>
	<div class="dashboard-container">
		<pageHeader :headerTitle="headerTitle" :showWeather="false" />

		<div style="height: calc(100vh - 12rem); display: flex; flex-direction: column">
			<div class="filter-controls">
				<div>
					<span class="filter-label">{{ $t('message.oneInverterNews.pageDeviceName') }}</span
					><br />
					<el-select v-model="deviceValue" :placeholder="$t('message.form.pageSelectHolder')" size="small" class="filter-select custom-select">
						<el-option v-for="item in deviceData" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					&nbsp;&nbsp; <span>{{ $t('message.oneInverterNews.pageLoad') }}</span
					>&nbsp;&nbsp; <span style="color: #5fcffa">60.00</span>&nbsp;&nbsp; <span class="unit">kW</span>&nbsp;&nbsp;
					<span>{{ $t('message.oneInverterNews.pageStatus') }}</span
					>&nbsp;&nbsp;
					<span style="color: greenyellow">发电</span>
				</div>

				<div>
					<span class="filter-label">{{ $t('message.oneInverterNews.pageSubstationChange') }}</span>
					<el-select v-model="titleName" :placeholder="$t('message.form.pageSelectHolder')" size="small" class="filter-select custom-select">
						<el-option v-for="item in substationData" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>

			<div class="summary-panel">
				<div class="total-generation">
					<span class="label">{{ $t('message.oneInverterNews.pageGeneration') }}</span>
					<span class="value">326,934</span>
					<span class="unit">kWh</span>
				</div>

				<div class="panel-divider">
					<div class="divider-line"></div>
				</div>

				<div v-for="item in pageCenterContent" :key="item.id" class="summary-metric-card">
					<div class="metric-content">
						<img :src="getImageUrl(item.image)" :alt="item.name" class="metric-icon" />
						<div class="metric-info">
							<p class="metric-name">{{ item.name }}</p>
							<p class="metric-value">
								<span class="number">{{ item.number }}</span>
								<span class="unit">{{ item.unit }}</span>
							</p>
						</div>
					</div>

					<div v-if="item.id !== 6" class="panel-divider mobile-hidden">
						<div class="divider-line"></div>
					</div>
				</div>
			</div>

			<div class="main-content-grid">
				<div class="monitor-container">
					<div class="header">
						<div class="tabs">
							<div v-for="tab in tabData" :key="tab" :class="['tab', { active: activeTab === tab }]" @click="activeTab = tab">
								{{ tab }}
							</div>
						</div>
					</div>

					<div class="content scrollable" v-if="activeTab === '常规'">
						<div class="metrics-grid">
							<div class="metric-row" v-for="(row, rowIndex) in chunkedMetrics" :key="rowIndex">
								<div class="monitor-metric-card" v-for="metric in row" :key="metric.name" :class="{ highlight: metric.highlight }">
									<div class="monitor-metric-name">{{ metric.name }}</div>
									<div class="monitor-metric-value">
										<span class="value">{{ metric.value }}</span>
										<span class="unit">{{ metric.unit }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="content scrollable" v-if="activeTab === 'MPPT'"></div>

					<div class="content scrollable" v-if="activeTab === '直流'">
						<div class="metrics-grid">
							<div class="metric-row" v-for="(row, rowIndex) in chunkedMetrics" :key="rowIndex">
								<div class="monitor-metric-card" v-for="metric in row" :key="metric.name" :class="{ highlight: metric.highlight }">
									<div class="monitor-metric-name">{{ metric.name }}</div>
									<div class="monitor-metric-value">
										<span class="value">{{ metric.value }}</span>
										<span class="unit">{{ metric.unit }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="content scrollable" v-if="activeTab === '状态'">
						<div class="metrics-grid">
							<div class="metric-row" v-for="(row, rowIndex) in statusData" :key="rowIndex">
								<div class="monitor-metric-card" v-for="item in row" :key="item.name" :class="{ highlight: item.highlight }">
									<div class="monitor-metric-name">{{ item.name }}</div>
									<div class="monitor-metric-value">
										<span class="value" style="color: #64bf8d">{{ item.value }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="chart-container">
					<div style="padding: 0.8rem; padding-top: 1.2rem">
						<el-button
							size="mini"
							v-for="(item, index) in buttonLabelOperate"
							:key="item.id"
							:type="activeDayTab === index ? 'primary' : ''"
							@click="changeIndex(index)"
						>
							{{ item.label }}
						</el-button>
					</div>

					<div v-if="activeDayTab === 0">
						<div ref="dayPower" class="dayPower"></div>
					</div>

					<div v-if="activeDayTab === 1">
						<div ref="dayPowerMeasure" class="dayPowerMeasure"></div>
					</div>

					<div v-if="activeDayTab === 2">
						<div style="display: flex; justify-content: right; margin-right: 3rem">
							<el-date-picker
								size="small"
								type="month"
								format="YYYY-MM"
								class="custom-date-picker"
								value-format="YYYY-MM"
								:placeholder="$t('message.form.pageSelectHolder')"
								v-model="dayPowerElectValue"
							/>
						</div>
						<div ref="powerElectMatch" class="powerElectMatch"></div>
					</div>

					<div v-if="activeDayTab === 3">
						<div style="display: flex; justify-content: right; margin-right: 3rem">
							<el-date-picker
								size="small"
								type="month"
								format="YYYY-MM"
								class="custom-date-picker"
								value-format="YYYY-MM"
								:placeholder="$t('message.form.pageSelectHolder')"
								v-model="monthElectValue"
							/>
						</div>
						<div ref="monthPowerMeasure" class="monthPowerMeasure"></div>
					</div>

					<div v-if="activeDayTab === 4">
						<div style="display: flex; justify-content: right; margin-right: 3rem">
							<el-date-picker
								size="small"
								type="year"
								format="YYYY"
								value-format="YYYY"
								class="custom-date-picker"
								:placeholder="$t('message.form.pageSelectHolder')"
								v-model="yearPowerValue"
							/>
						</div>
						<div ref="yearPowerMeasure" class="yearPowerMeasure"></div>
					</div>

					<div v-if="activeDayTab === 5">
						<div ref="everyYearPowerMeasure" class="everyYearPowerMeasure"></div>
					</div>
				</div>
			</div>

			<div class="data-table-container">
				<div class="table-left-panel">
					<p class="filter-label">{{ $t('message.oneInverterNews.pageType') }}</p>
					<el-select v-model="filter.type" :placeholder="$t('message.form.pageSelectHolder')" size="small" class="custom-select">
						<el-option label="数量/金额" value="quantity" />
					</el-select>

					<p class="filter-label">{{ $t('message.oneInverterNews.pageStartTime') }}</p>
					<el-date-picker
						v-model="filter.startTime"
						type="datetime"
						:placeholder="$t('message.form.pageSelectHolder')"
						size="small"
						class="custom-date-picker"
					/>

					<p class="filter-label">{{ $t('message.oneInverterNews.pageEndTime') }}</p>
					<el-date-picker
						v-model="filter.endTime"
						type="datetime"
						:placeholder="$t('message.form.pageSelectHolder')"
						size="small"
						class="custom-date-picker"
					/>
				</div>

				<div class="table-right-panel">
					<div class="time-range-section">
						<span>{{ $t('message.oneInverterNews.pageTime') }}</span>
						<span class="time-value">{{ formatDateTime(filter.startTime) }}</span>
						<span class="time-separator">{{ $t('message.oneInverterNews.pageTo') }}</span>
						<span class="time-value">{{ formatDateTime(filter.endTime) }}</span>
					</div>

					<div class="table-wrapper">
						<TableCustom :hasToolbar="false" :tableData="tableData" :tableOption="tableOption" :indexIsShow="true">
							<template #status="{ scope }">
								<span :style="scope.row.status === '发生' ? 'color: #67C23A' : 'color: #E6A23C'">
									{{ scope.row.status }}
								</span>
							</template>
						</TableCustom>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import 'echarts-wordcloud';
import * as echarts from 'echarts';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import TableCustom from '../../components/table/index.vue';
import { onMounted, defineComponent, reactive, toRefs, computed, nextTick, onActivated } from 'vue';
import pageHeader from '../../components/pageHeader/index.vue';

export default defineComponent({
	name: 'oneInverterNews',

	components: { pageHeader, TableCustom },

	setup(props, { emit }) {
		const { t } = useI18n();
		const state = reactive({
			tableRef: null,
			yearPowerValue: '',
			monthElectValue: '',
			dayPowerElectValue: '',
			deviceValue: '',
			substationData: [
				{ value: '1', label: '选项1' },
				{ value: '2', label: '选项2' },
				{ value: '3', label: '选项3' },
				{ value: '4', label: '选项4' },
			],
			deviceData: [
				{ value: '1', label: '全部状态' },
				{ value: '2', label: '正常发电' },
				{ value: '3', label: '部分发电' },
				{ value: '4', label: '通讯异常' },
			],
			pageCenterContent: [
				{
					id: 1,
					name: '实时功率',
					unit: 'kW',
					number: '5.20',
					image: 'image3.png',
				},
				{
					id: 2,
					name: '每瓦出力',
					unit: '%',
					number: '8.67',
					image: 'image1.png',
				},
				{
					id: 3,
					name: '日发小时',
					unit: 'h',
					number: '6.72',
					image: 'image2.png',
				},
				{
					id: 4,
					name: '日发电量',
					unit: 'kWh',
					number: '403',
					image: 'image4.png',
				},
				{
					id: 5,
					name: '月发电量',
					unit: 'kWh',
					number: '9,604',
					image: 'image4.png',
				},
				{
					id: 6,
					name: '年发电量',
					unit: 'kWh',
					number: '29,220',
					image: 'image4.png',
				},
			],
			tabData: ['常规', 'MPPT', '直流', '状态'],
			activeTabAlarm: 0,
			activeTab: '常规',
			metrics: [
				{ name: '电压Uab', value: '403.30', unit: 'V', highlight: false },
				{ name: '电压Ubc', value: '403.60', unit: 'V', highlight: false },
				{ name: '电压Uca', value: '403.20', unit: 'V', highlight: false },
				{ name: '电流la', value: '79.00', unit: 'A', highlight: false },
				{ name: '电流lb', value: '79.10', unit: 'A', highlight: false },
				{ name: '电流lc', value: '79.20', unit: 'A', highlight: false },
				{ name: '直流功率', value: '56.10', unit: 'kW', highlight: true },
				{ name: '有功功率', value: '55.20', unit: 'kW', highlight: true },
				{ name: '无功功率', value: '0.00', unit: 'kVar', highlight: false },
				{ name: '频率', value: '49.97', unit: 'Hz', highlight: false },
				{ name: '功率因数', value: '1.00', unit: '', highlight: false },
				{ name: '温度', value: '53.20', unit: '°C', highlight: false },
			],
			status: [
				{ name: '通讯正常', value: '发生', highlight: false },
				{ name: '正常运行', value: '发生', highlight: false },
				{ name: '电网过压', value: '复归', highlight: false },
				{ name: '电网过频', value: '复归', highlight: false },
				{ name: '电网欠压', value: '复归', highlight: false },
				{ name: '接地短路', value: '复归', highlight: false },
			],
			activeDayTab: 0,
			buttonLabelOperate: [
				{
					id: 'alarm',
					label: t('message.oneInverterNews.pageDailyPower'),
				},
				{
					id: 'log',
					label: t('message.oneInverterNews.pageDaily'),
				},
				{
					id: 'log',
					label: t('message.oneInverterNews.pagePowerElectTitle'),
				},
				{
					id: 'log',
					label: t('message.oneInverterNews.pageMonth'),
				},
				{
					id: 'log',
					label: t('message.oneInverterNews.pageYear'),
				},
				{
					id: 'log',
					label: t('message.oneInverterNews.pageEveryYear'),
				},
			],
			dayPower: null as HTMLElement | null,
			dayPowerMeasure: null as HTMLElement | null,
			powerElectMatch: null as HTMLElement | null,
			yearPowerMeasure: null as HTMLElement | null,
			monthPowerMeasure: null as HTMLElement | null,
			everyYearPowerMeasure: null as HTMLElement | null,
			isHighResolution: false,
			dayPowerChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: [
						'04:00',
						'04:30',
						'05:00',
						'05:30',
						'06:00',
						'06:30',
						'07:00',
						'07:30',
						'08:00',
						'08:30',
						'09:00',
						'09:30',
						'10:00',
						'10:30',
						'11:00',
						'11:30',
						'12:00',
						'12:30',
						'13:00',
						'13:30',
						'14:00',
						'14:30',
						'15:00',
					],
					axisLabel: {
						interval: 0,
						// rotate: 45,
						formatter: '{value}',
						fontSize: 10,
						color: '#fff',
					},
					axisTick: {
						alignWithLabel: true,
					},
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						fontSize: 10,
						color: '#fff',
					},
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [10, 11, 13, 15, 11, 8, 12, 14, 11, 12, 13, 15, 11, 18, 2, 14, 11, 12, 13, 15, 11, 8, 12, 14, 11, 10],
						type: 'line',
						smooth: true,
					},
				],
			},
			dayChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			monthChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			yearChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			everyYearChartOption: {
				grid: {},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '25%',
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								],
								global: false,
							},
							borderRadius: [10, 10, 6, 6],
						},
					},
				],
			},
			filter: {
				type: 'quantity',
				startTime: new Date(2025, 3, 27),
				endTime: new Date(2025, 3, 30),
			},
			tableData: [
				{
					id: 1,
					time: '2025-04-29 18:39:48',
					type: '状态量',
					description: '正常运行',
					status: '消除',
				},
				{
					id: 2,
					time: '2025-04-29 18:39:48',
					type: '状态量',
					description: '待机',
					status: '发生',
				},
				{
					id: 3,
					time: '2025-04-29 05:04:38',
					type: '状态量',
					description: '正常运行',
					status: '发生',
				},
				{
					id: 4,
					time: '2025-04-29 05:04:38',
					type: '状态量',
					description: '待机',
					status: '消除',
				},
				{
					id: 5,
					time: '2025-04-29 18:44:11',
					type: '状态量',
					description: '待机',
					status: '发生',
				},
			],
		});

		const route = useRoute();
		const titleName = route.query.name;
		const headerTitle = computed(() => {
			const name = (route.query.name as string) || '';
			return name + ' ' + t('message.oneInverterNews.pageTitle');
		});

		// 处理图片路径
		const getImageUrl = (imageName: string) => {
			return new URL(`../../assets/${imageName}`, import.meta.url).href;
		};

		// 将指标分成每行2个的二维数组
		const chunkedMetrics = computed(() => {
			const chunkSize = 2;
			const result = [];
			for (let i = 0; i < state.metrics.length; i += chunkSize) {
				result.push(state.metrics.slice(i, i + chunkSize));
			}
			return result;
		});

		const statusData = computed(() => {
			const chunkSize = 2;
			const result = [];
			for (let i = 0; i < state.status.length; i += chunkSize) {
				result.push(state.status.slice(i, i + chunkSize));
			}
			return result;
		});

		const changeIndex = async (id: number) => {
			state.activeDayTab = id;

			await nextTick();

			switch (id) {
				case 0:
					initDayPower();
					break;
				case 1:
					initDayPowerMeasure();
					break;
				case 2:
					initPowerElectMatch();
					break;
				case 3:
					initMonthPowerMeasure();
					break;
				case 4:
					initYearPowerMeasure();
					break;
				case 5:
					initEveryYearPowerMeasure();
					break;
				default:
					break;
			}
		};

		// 功率电量对比
		const initPowerElectMatch = () => {
			if (!state.powerElectMatch) return;

			const powerElectMatchElement = state.powerElectMatch;

			powerElectMatchElement.style.height = state.isHighResolution ? '18rem' : '11rem';

			const tooltipConfig = {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999',
					},
				},
			};

			const xAxisConfig = {
				type: 'category',
				data: ['04', '05', '06', '07', '08', '09', '10'],
				axisTick: { show: false },
				axisLine: { lineStyle: { color: '#fff' } },
			};

			const yAxisConfigs = [
				{
					type: 'value',
					name: '万kWh',
					axisLabel: { formatter: '{value}' },
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
				{
					type: 'value',
					name: 'MW',
					axisLabel: { formatter: '{value}' },
					splitLine: { lineStyle: { color: '#0E3A4F' } },
				},
			];

			const seriesData = [
				{
					name: '当前功率',
					type: 'bar',
					barWidth: '35%', // 柱子宽度
					tooltip: {
						valueFormatter: (value: any) => `${value} MW`,
					},
					data: [0.9, 0.3, 0.5, 0.4, 0.1, 0.9, 0.2],
					itemStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' },
							],
							global: false,
						},
						borderRadius: [10, 10, 6, 6],
					},
				},
				{
					name: '小时发电量',
					type: 'line',
					yAxisIndex: 1,
					smooth: true,
					tooltip: {
						valueFormatter: (value: any) => `${value} 万kWh`,
					},
					data: [0.05, 0.01, 0, 0.09, 0.02, 0.06, 0.07],
					itemStyle: {
						color: '#E00074',
					},
					lineStyle: {
						width: 2,
						type: 'solid',
					},
				},
			];

			const option = {
				grid: {
					containLabel: true,
					top: 30,
					bottom: state.isHighResolution ? 46 : 22,
					left: state.isHighResolution ? 20 : 15,
					right: state.isHighResolution ? 20 : 15,
				},
				tooltip: tooltipConfig,
				xAxis: [xAxisConfig],
				yAxis: yAxisConfigs,
				series: seriesData,
			};

			const chart = echarts.init(state.powerElectMatch);
			chart.setOption(option);
			window.addEventListener('resize', () => chart.resize());
		};

		// 日功率
		const initDayPower = async () => {
			if (!state.dayPower) return;

			const myChart = echarts.init(state.dayPower);
			state.dayPower.style.height = state.isHighResolution ? '18rem' : '11rem';

			await nextTick();

			myChart.setOption({
				...state.dayPowerChartOption,
				grid: {
					left: 30,
					right: 20,
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
				},
			});

			myChart.resize();
		};

		// 日发电量
		const initDayPowerMeasure = async () => {
			if (!state.dayPowerMeasure) return;
			const myChart = echarts.init(state.dayPowerMeasure);

			state.dayPowerMeasure.style.height = state.isHighResolution ? '18rem' : '11rem';

			await nextTick();

			myChart.setOption({
				...state.dayChartOption,
				grid: {
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 45 : 30,
					right: state.isHighResolution ? 20 : 20,
				},
			});

			myChart.resize();
		};

		//  月发电量
		const initMonthPowerMeasure = async () => {
			if (!state.monthPowerMeasure) return;
			const myChart = echarts.init(state.monthPowerMeasure);

			state.monthPowerMeasure.style.height = state.isHighResolution ? '18rem' : '11rem';

			await nextTick();

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					right: 20,
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 62 : 42,
					left: state.isHighResolution ? 42 : 38,
				},
			});

			myChart.resize();
		};

		//  年发电量
		const initYearPowerMeasure = async () => {
			if (!state.yearPowerMeasure) return;
			const myChart = echarts.init(state.yearPowerMeasure);

			state.yearPowerMeasure.style.height = state.isHighResolution ? '18rem' : '11rem';

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					right: 20,
					top: state.isHighResolution ? 20 : 15,
					bottom: state.isHighResolution ? 62 : 42,
					left: state.isHighResolution ? 42 : 38,
				},
			});

			myChart.resize();
		};

		// 历年发电量
		const initEveryYearPowerMeasure = async () => {
			if (!state.everyYearPowerMeasure) return;
			const myChart = echarts.init(state.everyYearPowerMeasure);
			state.everyYearPowerMeasure.style.height = state.isHighResolution ? '18rem' : '11rem';

			myChart.setOption({
				...state.monthChartOption,
				grid: {
					top: 15,
					right: 20,
					bottom: state.isHighResolution ? 40 : 20,
					left: state.isHighResolution ? 50 : 38,
				},
			});

			myChart.resize();
		};

		const formatDateTime = (date: Date) => {
			return date
				.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit',
					second: '2-digit',
					hour12: false,
				})
				.replace(/\//g, '-');
		};

		// table表头tableOption国际化
		const tableOption = computed(() => [
			{ prop: 'time', label: t('message.oneInverterNews.pageMoment') },
			{ prop: 'type', label: t('message.oneInverterNews.pageTypeClass') },
			{ prop: 'description', label: t('message.oneInverterNews.pageTypeDesc') },
			{ prop: 'status', label: t('message.oneInverterNews.pageStatus'), slotName: 'status' },
		]);

		onMounted(() => {
			state.isHighResolution = window.innerWidth >= 1600;
			initDayPower();
			initDayPowerMeasure();
			initMonthPowerMeasure();
			initYearPowerMeasure();
			initPowerElectMatch();
			initEveryYearPowerMeasure();
		});

		// 由于页面缓存原因(keep-alive)
		onActivated(() => {
			initDayPower();
			initDayPowerMeasure();
			initMonthPowerMeasure();
			initYearPowerMeasure();
			initPowerElectMatch();
			initEveryYearPowerMeasure();
		});

		return {
			tableOption,
			statusData,
			titleName,
			getImageUrl,
			changeIndex,
			headerTitle,
			formatDateTime,
			chunkedMetrics,
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss" scoped>
.scrollable {
	overflow-y: scroll; /* 始终显示 Y 轴滚动条（可以改为 auto） */
}

.scrollable::-webkit-scrollbar {
	display: none; /* 隐藏默认的滚动条样式 */
}

.filter-controls {
	height: 6%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.8rem;

	.filter-label {
		color: #fff;
		margin-right: 1rem;
		font-size: 1rem;
		font-weight: 500;
		min-width: 8rem;
	}

	.filter-select {
		width: 10rem;

		:deep(.el-input__wrapper) {
			background-color: #11223f;
			border: 1px solid #1a3a6a;
			box-shadow: none;

			.el-input__inner {
				color: #fff;
			}
		}
	}
}

.summary-panel {
	height: 16%;
	display: flex;
	align-items: center;
	border: 1px solid #1a3a6a;
	background-color: #11223f;
	border-radius: 0.8rem;
	margin-bottom: 0.8rem;
	padding: 1rem 0.8rem;
	box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.15);
	flex-wrap: wrap;
	justify-content: space-around;
}

.total-generation {
	display: flex;
	align-items: baseline;
	min-width: 10rem;
	padding: 0 0.8rem;
	margin: 0.8rem 0;

	.label {
		color: #fff;
		font-size: 1.2rem;
		margin-right: 0.8rem;
	}

	.value {
		color: #5fcffa;
		font-size: 1.2rem;
		font-weight: 700;
		margin-right: 0.5rem;
	}

	.unit {
		color: #a0b3c6;
		font-size: 0.8rem;
	}
}

.panel-divider {
	height: 4.5rem;
	display: flex;
	align-items: center;
	padding: 0 4px;

	.divider-line {
		height: 100%;
		width: 1px;
		background: linear-gradient(to bottom, transparent, rgba(90, 150, 220, 0.5), transparent);
	}
}

.summary-metric-card {
	display: flex;
	align-items: center;
	margin: 8px 0;
	flex-grow: 1;

	.metric-content {
		display: flex;
		align-items: center;
		padding: 0 8px;
		width: 100%;
		justify-content: space-around;

		.metric-icon {
			width: 4.2rem;
			height: 4.2rem;
			margin-right: 8px;
			object-fit: contain;
			flex-shrink: 0;
		}

		.metric-info {
			display: flex;
			flex-direction: column;
			min-width: 5rem;

			.metric-name {
				color: #fff;
				font-size: 1rem;
				font-weight: 500;
				margin: 0 0 4px 0;
				white-space: nowrap;
			}

			.metric-value {
				display: flex;
				align-items: baseline;

				.number {
					color: #5fcffa;
					font-size: 1.5rem;
					font-weight: 600;
					margin-right: 4px;
				}

				.unit {
					color: #a0b3c6;
					font-size: 1rem;
				}
			}
		}
	}
}

.main-content-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1rem;
	height: 38%;
	margin-bottom: 1rem;
}

.monitor-container {
	background: url('../../assets/R12.png') no-repeat center;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;

	.header {
		background-color: #223967;
		color: white;
		padding: 1rem;

		.tabs {
			display: flex;
			border-bottom: 1px solid #3d5166;

			.tab {
				padding: 0.2rem 1rem;
				cursor: pointer;
				font-size: 1rem;
				transition: all 0.3s;
				border-bottom: 2px solid transparent;

				&:hover {
					background-color: rgba(255, 255, 255, 0.1);
				}

				&.active {
					border-bottom-color: #42b983;
					color: #42b983;
					font-weight: bold;
				}
			}
		}
	}

	.content {
		padding: 0.5rem;
		background-color: #1a3a6a;
		flex: 1;
		overflow-y: scroll;
	}

	.metrics-grid {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		height: 100%;
	}

	.metric-row {
		display: flex;
		gap: 0.5rem;
		flex: 1;
	}

	.monitor-metric-card {
		flex: 1;
		padding: 0.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(16, 42, 87, 0.7);
		border-radius: 0.5rem;

		.monitor-metric-name {
			font-size: 13px;
			color: #fff;
			text-align: center;
			margin-bottom: 0.5rem;
		}

		.monitor-metric-value {
			display: flex;
			align-items: baseline;

			.value {
				font-size: 1rem;
				font-weight: bold;
				color: #5fcffa;
				margin-right: 0.5rem;
			}

			.unit {
				font-size: 1rem;
				color: #a0b3c6;
			}
		}
	}
}

.chart-container {
	background: url('../../assets/R12.png') no-repeat center;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;

	.chart-tabs {
		padding: 0.8rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.chart-area {
		flex: 1;
		padding: 0 0.8rem 0.8rem;

		> div {
			height: 100%;
			width: 100%;
		}
	}
}

.data-table-container {
	background: url('../../assets/R12.png') no-repeat center;
	background-size: 100% 100%;
	display: flex;
	height: 37%;
	gap: 3rem;

	.table-left-panel {
		width: 15rem;
		padding: 1rem;
		display: flex;
		gap: 0.8rem;
		flex-direction: column;

		.filter-label {
			font-size: 1rem;
			color: #fff;
		}
	}

	.table-right-panel {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 1rem 1rem 1rem 0;

		.time-range-section {
			display: flex;
			align-items: center;
			gap: 5px;
			font-weight: bold;
			font-size: 1.3rem;
			margin-bottom: 0.6rem;

			.time-value {
				color: #5fcffa;
				margin-left: 0.6rem;
				margin-right: 0.6rem;
			}

			.time-separator {
				color: #fff;
			}
		}

		.table-wrapper {
			flex: 1;
			overflow: hidden;
		}
	}
}
</style>
